<ui:composition template="/WEB-INF/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="head">
        <title>Invitation List</title>
        <f:metadata>
            <f:viewParam name="eventId" value="#{invitationListBean.eventId}" />
            <f:viewParam name="usernameToAdd" value="#{invitationListBean.usernameToAdd}" />
            <f:viewParam name="usernameToRemove" value="#{invitationListBean.usernameToRemove}" />
            <f:viewAction action="#{invitationListBean.init()}" />
        </f:metadata>
    </ui:define>
    <ui:define name="content">
        <h1>Invitation List</h1>
        <p:outputPanel id="invitationListPanel">
            <h:form>
                <h:panelGrid id="addUserGrid" columns="4">
                    <p:outputLabel value="Username" for="username" />
                    <p:inputText id="username" value="#{invitationListBean.usernameToAdd}"
                                 validator="#{usernameValidatorInvitationList.validate}">
                        <p:ajax update="usernameMsg" />
                    </p:inputText>
                    <p:commandButton value="add" action="#{invitationListBean.addUser()}"
                                     update=":invitationListPanel" />
                    <p:message id="usernameMsg" for="username" />
                </h:panelGrid>
            </h:form>
            <h:form>
                <h:panelGrid id="userListGrid" columns="3">
                    <p:outputLabel value="Choose Event" for="eventName" />
                    <p:selectOneMenu id="eventName" value="#{invitationListBean.eventName}" >
                        <p:ajax update="eventNameMsg" />
                        <f:selectItems value="#{invitationListBean.createdEvents}" />
                    </p:selectOneMenu>
                    <p:message id="eventNameMsg" for="eventName" />
                    <p:outputLabel value="Users to invite" />
                    <p:selectOneListbox value="#{invitationListBean.usernameToRemove}" >
                        <f:selectItems value="#{invitationListBean.invitationList}" />
                    </p:selectOneListbox>
                    <p:commandButton value="Remove" action="#{invitationListBean.removeUser()}"
                                     update=":invitationListPanel" />
                    <p:outputLabel value="Title" for="title" />
                    <p:inputText id="title" value="#{invitationListBean.title}" >
                        <p:ajax update="titleMsg" />
                    </p:inputText>
                    <p:message id="titleMsg" for="title" />
                    <p:outputLabel value="Text" for="text" />
                    <p:inputTextarea id="text" value="#{invitationListBean.text}" >
                        <p:ajax update="textMsg" />
                    </p:inputTextarea>
                    <p:message id="textMsg" for="text" />
                    <p:commandButton value="Send" action="#{invitationListBean.sendInvitations()}" />
                    <p:commandButton value="Clear" action="#{invitationListBean.clear()}"
                                     update=":invitationListPanel" />
                </h:panelGrid>
            </h:form></p:outputPanel>
    </ui:define>
</ui:composition>